var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");
let isGameOver = false;
let board = null;
//人人对战本地棋盘
var mapArr=[];
//人人对战棋子颜色
var colors=[
    "#000",
    "#fff"
];
//人人对战胜利判断方向数组
var mode = [
    [1, 0],
    [0, 1],
    [1, 1],
    [1, -1]
];
//人人对战判断玩家轮换
var step=0;
let lastX=null;
let lastY=null;

// 初始化游戏
function initGame() {
    mapArr=[];
    drawBoard();
}

// 画棋盘
function drawBoard() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.lineWidth = 2;
    ctx.beginPath();

    // 调整网格大小以适应新的画布尺寸
    for (var i = 1; i < 16; i++) {
        ctx.moveTo(40 * i, 40);
        ctx.lineTo(40 * i, 600);
        ctx.moveTo(40, 40 * i);
        ctx.lineTo(600, 40 * i);
    }
    ctx.stroke();
    for (var i = 0; i < 15; i++) {
        mapArr[i] = [];
        for (var j = 0; j < 15; j++) {
            mapArr[i][j] = 0;
        }
    }
}

// 优化棋子绘制效果
//根据玩家落点画出棋子
function drawChess(x, y, color) {
    ctx.save();
    ctx.beginPath();
    ctx.arc(x, y, 18, 0, Math.PI * 2, false);

    // 添加渐变效果
    let gradient = ctx.createRadialGradient(x - 3, y - 3, 1, x - 3, y - 3, 18);
    if (color === "#000") {
        gradient.addColorStop(0, "#666");
        gradient.addColorStop(1, "#000");
    } else {
        gradient.addColorStop(0, "#fff");
        gradient.addColorStop(1, "#ccc");
    }

    ctx.fillStyle = gradient;
    ctx.fill();

    // 添加阴影效果
    ctx.shadowColor = 'rgba(0,0,0,0.5)';
    ctx.shadowBlur = 5;
    ctx.shadowOffsetX = 2;
    ctx.shadowOffsetY = 2;

    ctx.strokeStyle = color === "#000" ? "#333" : "#ccc";
    ctx.stroke();
    ctx.restore();
}

function drawLShape(x,y){
    console.log("标记");
    ctx.save();
    ctx.lineWidth = 2;
    ctx.strokeStyle = "#00FF00"; // 黑色线

    var gridX=x;
    var gridY=y;

    // 画左上方向的“L”形
    if (gridX>=80&&gridY>=80){
        ctx.beginPath();
        ctx.moveTo(gridX - 10, gridY - 10); // 起点
        ctx.lineTo(gridX - 10, gridY - 20); // 垂直线
        ctx.moveTo(gridX - 10, gridY - 10); // 起点
        ctx.lineTo(gridX - 20, gridY - 10); // 水平线
        ctx.stroke();
    }


    // 画右上方向的“L”形
    if (gridX<=560&&gridY>=80&&gridX>=40&&gridY>40){
        ctx.beginPath();
        ctx.moveTo(gridX + 10, gridY - 10); // 起点
        ctx.lineTo(gridX + 10, gridY - 20); // 垂直线
        ctx.moveTo(gridX + 10, gridY - 10); // 起点
        ctx.lineTo(gridX + 20, gridY - 10); // 水平线
        ctx.stroke();
    }


    // 画左下方向的“L”形
    if (gridY<=560&&gridX>=80) {
        ctx.beginPath();
        ctx.moveTo(gridX - 10, gridY + 10); // 起点
        ctx.lineTo(gridX - 10, gridY + 20); // 垂直线
        ctx.moveTo(gridX - 10, gridY + 10); // 起点
        ctx.lineTo(gridX - 20, gridY + 10); // 水平线
        ctx.stroke();
    }
    // 画右下方向的“L”形
    if (gridX<=560&&gridY<=560){
        ctx.beginPath();
        ctx.moveTo(gridX + 10, gridY + 10); // 起点
        ctx.lineTo(gridX + 10, gridY + 20); // 垂直线
        ctx.moveTo(gridX + 10, gridY + 10); // 起点
        ctx.lineTo(gridX + 20, gridY + 10); // 水平线
        ctx.stroke();
    }

    ctx.restore();
}

function clearL() {
    // 保存当前绘图状态
    ctx.save();

    var gridX = lastY;
    var gridY = lastX;

    // 清除左上方向的"L"形
    if (gridX >= 80 && gridY >= 80) {
        // 清除垂直线
        ctx.clearRect(gridX - 11, gridY - 20, 3, 12);
        // 清除水平线
        ctx.clearRect(gridX - 20, gridY - 11, 12, 3);
    }

    // 清除右上方向的"L"形
    if (gridX <= 560 && gridY >= 80 && gridX >= 40 && gridY > 40) {
        // 清除垂直线
        ctx.clearRect(gridX + 9, gridY - 20, 3, 12);
        // 清除水平线
        ctx.clearRect(gridX + 9, gridY - 11, 12, 3);
    }

    // 清除左下方向的"L"形
    if (gridY <= 560 && gridX >= 80) {
        // 清除垂直线
        ctx.clearRect(gridX - 11, gridY + 9, 3, 12);
        // 清除水平线
        ctx.clearRect(gridX - 20, gridY + 9, 12, 3);
    }

    // 清除右下方向的"L"形
    if (gridX <= 560 && gridY <= 560) {
        // 清除垂直线
        ctx.clearRect(gridX + 9, gridY + 9, 3, 12);
        // 清除水平线
        ctx.clearRect(gridX + 9, gridY + 9, 12, 3);
    }

    // 重绘该位置的棋盘线
    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.strokeStyle = "#000";

    // 重绘水平线
    ctx.moveTo(Math.max(40, gridX - 20), gridY);
    ctx.lineTo(Math.min(600, gridX + 20), gridY);

    // 重绘垂直线
    ctx.moveTo(gridX, Math.max(40, gridY - 20));
    ctx.lineTo(gridX, Math.min(600, gridY + 20));

    ctx.stroke();

    // 如果该位置有棋子，重绘棋子
    const row = Math.floor(gridY / 40) - 1;
    const col = Math.floor(gridX / 40) - 1;
    if (row >= 0 && row < 15 && col >= 0 && col < 15) {
        if (mapArr[col][row]) {
            drawChess(gridX, gridY, mapArr[col][row]);
        }
    }

    ctx.restore();
}

canvas.addEventListener("mousemove", function (e) {
    if (isGameOver) return;

    var row = Math.floor((e.offsetY + 20) / 40) - 1;
    var col = Math.floor((e.offsetX + 20) / 40) - 1;

    //越界判断
    if (row < 0 || row > 14 || col < 0 || col > 14) return;

    //该点有棋子则不显示
    if (mapArr[col][row] !== 0) return;

    const closestX = (col + 1) * 40;
    const closestY = (row + 1) * 40;
    const tolerance = 20; // 鼠标靠近交叉点的距离容忍度

    clearL();

    if (
        Math.abs(e.offsetY - closestY) < tolerance &&
        Math.abs(e.offsetX - closestX) < tolerance
    ) {
        drawLShape(closestX, closestY);
    }
    lastY = closestX;
    lastX = closestY;
});

// 处理玩家落子
canvas.addEventListener("click", function(e) {
    if (isGameOver) return;

    var row = Math.floor((e.offsetY + 20) / 40) - 1;
    var col = Math.floor((e.offsetX + 20) / 40) - 1;

    //越界判断
    if (row < 0 || row >= 15 || col < 0 || col >= 15) return;


    // 检查该位置是否已经有棋子
    if (mapArr[col][row] !== 0) return;

    // 立即显示玩家的棋子
    drawChess(40 * (col + 1), 40 * (row + 1), "#000");

    // 禁用玩家操作
    isPlayerTurn = false;

    mapArr[col][row]=colors[step%2];
    drawChess(40*(col+1),40*(row+1),colors[step%2]);
    check(row, col);
    step++;
});



function check(dx, dy) {
    checkSuccess(dx , dy , colors[step % 2], mode[0]);
    checkSuccess(dx , dy , colors[step % 2], mode[1]);
    checkSuccess(dx, dy  , colors[step % 2], mode[2]);
    checkSuccess(dx, dy  , colors[step % 2], mode[3]);
}

//人人对战胜利判断函数
function checkSuccess(x, y, color, mode) {
    var count = 1;

    // 检测正方向
    for (var i = 1; i < 5; i++) {
        var nx = x + i * mode[0];
        var ny = y + i * mode[1];

        if (nx >= 0 && nx < 15 && ny >= 0 && ny < 15 && mapArr[ny][nx] === color) {
            count++;
        } else {
            break;
        }
    }

    // 检测反方向
    for (var i = 1; i < 5; i++) {
        var nx = x - i * mode[0];
        var ny = y - i * mode[1];
        if (nx >= 0 && nx < 15 && ny >= 0 && ny < 15 && mapArr[ny][nx] === color) {
            count++;
        } else {
            break;
        }
    }

    // 修改点：调整胜负判断逻辑
    if (count >= 5&& !isGameOver) {
        $(".mol-main").css("display", "block");
        console.log(color);
        if (color === colors[0]) { // 黑子获胜
            $(".blackPlayer").css("display", "block");
            isGameOver = true;
        } else if (color === colors[1]) { // 白子获胜
            $(".whitePlayer").css("display", "block");
            isGameOver = true;
        }
    }
}

// 重新开始游戏
$('.btn').click(function(){
    $('.mol-main').css("display", "none");
    $('.whitePlayer').css("display","none");
    $('.blackPlayer').css("display","none");
    isGameOver = false;
    step=0;
    initGame();
});

// 初始化游戏
initGame();

$("#back").click(function () {
    window.location.href = "../game/index.html?show=choose";
});